<template>
	<view class="toast_mode">
		<view class="alert_content">
			<view class="del" @click="cancel">
				<image src="../../../static/delete.png" mode="aspectFill"></image>
			</view>
			<view class="alert_top_title">
				<view class="alert_top_title_left"></view>
				<view class="alert_top_title_name">登录代理后台</view>
				<view class="alert_top_title_right"></view>
			</view>
			<view class="alert_center">
				<input type="text" class="alert_input" v-model="account" placeholder="请输入账号" />
				<input type="password" class="alert_input" v-model="pwd" placeholder="请输密码" />
			</view>
			<view class="alert_btn" @click="login">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			code:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				account:'',
				pwd:''
			}
		},
		methods: {
			cancel(){
				this.$emit('cancelLogin')
			},
			login(){
				let that = this
				uni.login({
					success(res) {
						console.log(res)
						if(res.errMsg == 'login:ok'){
							console.log({account:that.account,pwd:that.pwd,code:res.code})
							that.$emit('loginSubmit',{account:that.account,pwd:that.pwd,code:res.code})
						}
					}
				})
				
			}
		}
	}
</script>

<style>
	.toast_mode{
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		width: 750rpx;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 999999;
	}
	.alert_content{
		width: 626rpx;
		height: 488rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		z-index: 1000000;
		position: absolute;
		top: 424rpx;
		left: 62rpx;
	}
	.del{
		width: 626rpx;
		float: right;
	}
	.del image{
		width: 22rpx;
		height: 22rpx;
		margin: 28rpx 28rpx 0 0;
		float: right;
	}
	.alert_top_title{
		width: 626rpx;
		height: 44rpx;
		float: left;
	}
	.alert_top_title_left{
		width: 28rpx;
		height: 1px;
		border-top: solid #666666 1px;
		float: left;
		margin-top: 22rpx;
		margin-left: 162rpx;
		font-weight: 700;
	}
	.alert_top_title_right{
		width: 28rpx;
		height: 1px;
		border-top: solid #666666 1px;
		float: left;
		margin-top: 22rpx;
		font-weight: 700;
	}
	.alert_top_title_name{
		color: #252631;
		font-size: 36rpx;
		font-weight: 700;
		float: left;
		margin: 0 16rpx 0 16rpx;
		line-height: 44rpx;
	}
	.alert_center{
		width: 536rpx;
		height: auto;
		margin: 12rpx 44rpx 0 46rpx;
		float: left;
	}
	.alert_input{
		width: 450rpx;
		height: 88rpx;
		border-radius: 4rpx;
		background-color: #F6F6F6;
		color: #999999;
		font-size: 28rpx;
		line-height: 88rpx;
		padding: 0 40rpx 0 40rpx;
		margin-top:20rpx;
		float: left;
		display: block;
	}
	.alert_btn{
		width: 530rpx;
		height: 92rpx;
		margin-left: 50rpx;
		margin-top: 40rpx;
		background-color: #FE7701;
		border-radius: 48rpx;
		color: #FFFFFF;
		font-weight: 700;
		font-size: 32rpx;
		line-height: 92rpx;
		text-align: center;
		float: left;
	}
</style>
